:root {
  font-size: 20px;
}
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #000;
  color: #FFF;
}

h1 {
  font-size: 6rem;
  margin: 0;
  padding: 0;
  font-family: monospace;
  position: relative;
}

span {
  display: inline-block;
  overflow: hidden;
  width: 0ch;
  animation: .1s text-in ease-in-out forwards;
}

@keyframes text-in {
  form {
    width: 0ch;
  }
  to {
    width: 1ch;
  }
}

h1::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 6rem;
  background: #FFF;
  border-radius: 2px;
  right: -30px;
}
h1.ended::after {
  animation: 1.1s cursor steps(2, jump-none) infinite;
}
// 闪烁效果
@keyframes cursor {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// infinite 重复动画
//   animation: 1.1s cursor steps(2, jump-none) infinite;
// 2秒 执行typing动画  forwards animation-fill-mode属性 当动画完成后，保持最后一个属性值
// steps(13,jump-none) 动画分13格显示
// animation: 2s typing steps(13, jump-none) forwards;
//
// @keyframes typing {
//     form {
//         width: 1ch;
//     }
//     to {
//         width: 13ch;
//     }
// }